<template>
  <dv-border-box-8 style="height: 500px">
    <div ref="bubble" style="width: 650px; height: 500px"></div>
  </dv-border-box-8>
</template>

<script>
export default {
  name: "paopao",
  data() {
    return {
      data: [
        { label: "38个体育设施", amount: 100 },
        { label: "7个卫生室", amount: 70 },
        { label: "5个卫生间", amount: 70 },
        { label: "4个垃圾站", amount: 60 },
        { label: "其他1", amount: 60 },
        { label: "其他2", amount: 60 },
      ],
    };
  },
  methods: {
    initBubbleChart(data = [], format = [], dom) {
      let [maxValue, temp] = [0, []];
      data.forEach((item) => {
        temp.push(item[format[1]]);
      });
      maxValue = Math.max.apply(null, temp);

      // 气泡颜色数组
      let color = [
        "#FFB600",
        "#886CFF",
        "#0084FF",
        "#4CB690",
        "#58B458",
        "#6C6C6C",
        "#F56161",
        "#FC754C",
        "#5F5EEC",
      ];
      // 气泡颜色备份
      let bakeColor = [...color];
      // 气泡数据
      let bubbleData = [];
      // 气泡基础大小
      let basicSize = 70;
      // 节点之间的斥力因子,值越大,气泡间距越大
      let repulsion = 380;
      // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
      if (data.length >= 5 && data.length < 10) {
        basicSize = 50;
        repulsion = 230;
      }
      if (data.length >= 10 && data.length < 20) {
        basicSize = 40;
        repulsion = 150;
      } else if (data.length >= 20) {
        basicSize = 30;
        repulsion = 75;
      }

      // 填充气泡数据数组bubbleData
      for (let item of data) {
        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
        if (!bakeColor.length) bakeColor = [...color];
        let colorSet = new Set(bakeColor);
        let curIndex = Math.round(Math.random() * (colorSet.size - 1));
        let curColor = bakeColor[curIndex];
        colorSet.delete(curColor);
        bakeColor = [...colorSet];
        // 气泡大小设置
        let size = (item[format[1]] * basicSize * 3) / maxValue;
        if (size < basicSize) size = basicSize;

        bubbleData.push({
          name: item[format[0]],
          value: item[format[1]],
          symbolSize: size,
          draggable: true,
          label: {
            color: "#fff",
            fontSize: 18,
          },
          itemStyle: {
            normal: {
              color: curColor,
              textStyle: {
                color: "#fff", // 设置字体颜色为白色
              },
            },
          },
        });
      }

      // let bubbleId = document.getElementById(dom);
      // console.log(dom);
      let bubbleChart = this.$echarts.init(dom);
      let bubbleOptions = {
        // backgroundColor: "#fff",
        animationEasingUpdate: "bounceIn",

        series: [
          {
            type: "graph",

            layout: "force",
            force: {
              repulsion: repulsion,
              edgeLength: 10,
            },
            // 是否开启鼠标缩放和平移漫游
            roam: false,
            label: { normal: { show: true } },
            data: bubbleData,
          },
        ],
      };
      bubbleChart.setOption(bubbleOptions);
    },
  },
  mounted() {
    this.$nextTick(() => {
      console.log("DOM元素", this.$refs.bubble); // 输出DOM元素，检查是否获取到
      this.initBubbleChart(this.data, ["label", "amount"], this.$refs.bubble); // 传入DOM元素的id或其他合适的标识符
    });
  },
};
</script>

<style scoped>
.bg {
  height: 500px;
  /* width: 200px; */
  text-align: center;
  /* line-height: 100px; */
  border-radius: 50%;
  background: linear-gradient(180deg, #77b0f5 0%, #528ff0 100%);
}
</style>
